<template>
  <el-container class="main_con">

    <div class="filter_con ds_block u-m-b-20">

      <div class="filter_area">

        <date-picker size="medium" @change="gettime" class="mr_15 mt_15"></date-picker>
        <el-button size="medium" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="u-flex u-p-20 user_consume">
      <div class="consume_item">
        <div class="icon"><i class="el-icon-money" style="color:#67C23A;"></i></div>
        <div class="data">
          <div class="name">阶梯佣金累计发放/提现成功（元）</div>
          <div class="num"><span v-if="detail.commissions_total">{{detail.commissions_total.toFixed(2)}}/{{detail.draw_total.toFixed(2)}}</span></div>
        </div>
      </div>
      <div class="consume_item">
        <div class="icon"><i class="el-icon-s-order" style="color:#67C23A;"></i></div>
        <div class="data">
          <div class="name">累计订单总数（单）</div>
          <div class="num"><span>{{detail.order_total}}</span></div>
        </div>
      </div>
      <div class="consume_item">
        <div class="icon"><i class="el-icon-money" style="color:#F56C6C;"></i></div>
        <div class="data">
          <div class="name">获得阶梯佣金人数/分销商总人数</div>
          <div class="num"><span>{{detail.assessment_agent_total}}/{{detail.agent_total}}</span></div>
        </div>
      </div>
      <div class="consume_item">
        <div class="icon"><i class="el-icon-s-order" style="color:#F56C6C;"></i></div>
        <div class="data">
          <div class="name">未达标降级人数</div>
          <div class="num"><span>{{detail.degrades_total}}</span></div>
        </div>
      </div>
    </div>
    <div class="list_con">
      <el-table :data="list" element-loading-text fit highlight-current-row class="main-loading">
        <el-table-column prop="mobile" label="分销商">
          <template slot-scope="scope">
            <div class="u-flex" v-if="scope.row.user">
              <div class="face"><vimage :src="scope.row.user.picurl" style="width:50px;height:50px;display:block;border-radius:50%;"></vimage></div>
              <div class="info">
                <div class="name" :title="scope.row.user.nickname">{{ scope.row.user.nickname }}</div>
                <div class="source"><i class="weixin el-sc-weixin4"></i></div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="grade_name" label="分销商等级">

        </el-table-column>
        <el-table-column prop="commission_count" label="阶梯佣金"></el-table-column>
        <el-table-column prop="money_count" label="订单金额"></el-table-column>

        <el-table-column prop="order_count" label="订单数量"></el-table-column>
      </el-table>
           <div class="table_footer">

        <el-pagination
          @current-change="ChangeCurrent"
          class="pages"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="10"
          hide-on-single-page
        ></el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import {getindex} from '@/api/mall/commission';
import {agent_gradelist} from '@/api/mall/agent';
import DatePicker from '@/components/DatePicker/index';

export default {
  data() {
    return {
      params: {
        start_time: '',
        end_time: '',
        page:1,
        size:10
      },
      list: [],
      total:0,
detail:{

}
    };
  },
  components:{
    DatePicker
  },
  mounted() {
    this.agent_gradelist();
  },
  methods: {
    search(){
      this.params.page==1
      this.getindex()
    },
    //获取时间
    gettime(value) {
      this.params.start_time = value[0];
      this.params.end_time = value[1];
    },
    agent_gradelist() {
      let data = {
        page: 1,
        size: 10
      };
      agent_gradelist(data).then(res => {
        let list = res.msg;
        list.unshift({id: 0, name: '默认等级'});
        this.gradelist = list;
        this.getindex();
      });
    },
    getindex() {
      getindex(this.params).then(res => {
        console.log(res);
        this.detail=res.msg
        let list = res.msg.assessment_commission_list.data;
        this.total=res.msg.assessment_commission_list.total
        list.forEach(a=>{
          if(a.agent&&a.agent.grade_id){
            let i=this.gradelist.findIndex(_=>_.id==a.agent.grade_id)
            if(i>-1){
              a.grade_name=this.gradelist[i].name
            }
          }else{
            a.grade_name=""
          }

        })
        this.list=list
      });
    },
    ChangeCurrent(val){
      this.params.page=val;
      this.getindex()
    }
  }
};
</script>

<style lang="scss">
  .user_consume{
  background-color: #fff;
  }
  .consume_item {
    flex-grow: 1;
    margin-right: 20px;
    box-sizing: border-box;
    border: 1px solid #e0e3e8;

    display: flex;
    // justify-content: center;
    padding: 35px;

    &:last-child {
      margin-right: 0;
    }

    .icon {
      font-size: 50px;
      margin-right: 20px;
    }

    .data {
      display: flex;
      flex-direction: column;

      .name {
        font-size: 14px;
        color: #303133;
      }

      .num {
        color: #909399;
        margin-top: 10px;

        ::v-deep .el-link--inner {
          font-size: 24px;
        }
      }
    }
  }
</style>
